<script setup>
import { nextTick, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import shopperApi from "@/api/shopperApi";
import constants from "@/utils/constants";

const router = useRouter();

const submitForm = ref();
const searchForm = ref();
const searchModel = reactive({
    name: "",
});
const visible = ref(false);
let uploadVisible = ref(false);
const loading = ref(false);

let submitData = ref({});

let pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 15,
    showPageSize: true,
    pageSizeOptions: [15, 25, 30, 50],
    showTotal: true,
    pageChange: (current) => {
        pagination.current = current;
        search(current, pagination.pageSize);
    },
    pageSizeChange(size) {
        pagination.pageSize = size;
        search(pagination.current, size);
    },
});

const columns = [
    {
        title: "姓名",
        dataIndex: "realname",
    },
    {
        title: "手机号",
        dataIndex: "mobile",
    },
    {
        title: "操作",
        slotName: "action",
        align: 'center',
        fixed: "right",
        width: 200,
    },
];
const data = ref([]);

const showAddDialog = () => {
    visible.value = true;
    submitForm.value.resetFields();
};

const editRecord = (record) => {
    visible.value = true;
    nextTick(() => {
        submitForm.value.resetFields();
        submitData.value = Object.assign({}, record);
    });
};

const deleteRecord = (record) => {
    shopperApi
        .delete({
            id: record.id,
        })
        .then((res) => {
            search(1, 15);
        });
};

const handleSubmitSuccess = (values, e) => {
    shopperApi.save(values).then((res) => {
        visible.value = false;
        Message.success("保存成功");
        search(1, 15);
    });
};

const search = (current = 1, size = 15) => {
    var params = {
        pageNo: current,
        pageSize: size,
        queryParam: Object.assign({}, searchModel),
    };
    loading.value = true;
    shopperApi.queryPage(params).then((res) => {
        data.value = res.records;
        pagination.total = res.total;
        loading.value = false;
    });
};

const refresh = () => {
    search(1, 15);
};

const getNationName = (value) => {
    let nationItem = constants.nationList.find((res) => {
        return res.value == value;
    });
    return !nationItem ? "" : nationItem.label;
};

const reset = () => {
    searchForm.value.resetFields();
};

search();
</script>

<template>
    <a-card>
        <a-row>
            <a-col :flex="1">
                <a-form ref="searchForm" :model="searchModel" :label-col-props="{ span: 8 }"
                    :wrapper-col-props="{ span: 16 }" label-align="left">
                    <a-row :gutter="16">
                        <a-col :span="8">
                            <a-form-item field="name" label="姓名">
                                <a-input v-model="searchModel.name" placeholder="请输入姓名" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item field="mobile" label="手机号">
                                <a-input v-model="searchModel.mobile" placeholder="请输入手机号" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-col>
            <a-divider style="height: 84px" direction="vertical" />
            <a-col :flex="'86px'" style="text-align: right">
                <a-space direction="vertical" :size="18">
                    <a-button type="primary" @click="refresh">
                        <template #icon>
                            <icon-search />
                        </template>
                        查询
                    </a-button>
                    <a-button @click="reset">
                        <template #icon>
                            <icon-refresh />
                        </template>
                        重置
                    </a-button>
                </a-space>
            </a-col>
        </a-row>
    </a-card>
    <a-card style="margin-top: 20px">
        <div class="toolbar">
            <a-space>
                <a-button type="primary" @click="showAddDialog">
                    <template #icon>
                        <icon-plus />
                    </template>
                    新增配送员
                </a-button>
            </a-space>
        </div>
        <a-table :columns="columns" row-key="id" :loading="loading" :data="data" @page-change="pagination.pageChange"
            @page-size-change="pagination.pageSizeChange" :pagination="pagination" :bordered="false">
            <template #action="{ record }">
                <a-space>
                    <a-button type="text" @click="editRecord(record)">编辑</a-button>
                    <a-popconfirm content="确认要删除该数据吗？" @ok="deleteRecord(record)">
                        <a-button type="text">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
    </a-card>
    <a-modal v-model:visible="visible" title="新增账户" :footer="null">
        <a-form ref="submitForm" size="large" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            :model="submitData" @submit-success="handleSubmitSuccess">
            <a-form-item field="realname" label="姓名" :rules="[{ required: true, message: '请输入姓名' }]">
                <a-input v-model.trim="submitData.realname" placeholder="请输入姓名" />
            </a-form-item>
            <a-form-item field="mobile" label="手机号" :rules="[{ required: true, message: '请输入手机号' }]">
                <a-input v-model.trim="submitData.mobile" placeholder="请输入手机号" />
            </a-form-item>
            <!-- <a-form-item>
                <div style="color: #999; font-size: 12px">
                    注：账号新增成功后，默认登录密码为888888
                </div>
            </a-form-item> -->
            <a-form-item>
                <a-space>
                    <a-button html-type="submit" type="primary">保存</a-button>
                    <a-button @click="() => {
                        visible = false;
                    }
                        ">取消</a-button>
                </a-space>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style scoped></style>
